<template>
  <div class="collection-block">
    <div class="title">
      <h3>推荐歌曲</h3>
      <a href="#">更多</a>
    </div>
    <div
      style="margin-top:10px;"
      class="list clearfin"
      v-for="(item,index) in songList "
      :key="index"
    >
      <router-link :to="`/player/${item.id}`" tag="div">
        <div class="item">
          <img :src="item.picUrl" />
          <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
            <div class="main">{{item.name}}</div>
            <div class="gary">{{item.copywriter}}</div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      songList: []
    }
  },
  mounted () {
    this.$api.sheeTlist().then(res => {
      this.songList = res.result
    })
  }
}
</script>

<style scoped>
.collection-block {
  padding: 5px 20px;
  background-color: #f8f8f8;
  height: 1000px;
}
.title {
  display: flex;
  justify-content: space-between;
}
.title {
  padding: 10px;
}
.list .item {
  width: 29.3%;
  float: left;
  padding: 0 10px;
  margin-bottom: 10px;
}
.gary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
  font-size: 12px;
}
</style>
